<%--
  Created by IntelliJ IDEA.
  User: WS
  Date: 2020/6/25
  Time: 21:31
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <style>

        #dataTable {
            border: 1px black solid;
            margin-top: 20px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        button {
            margin: 5px 10px;
        }

        #dataTable tr th,
        #dataTable tr td {
            max-width: 60em;
            min-width: 100px;
            min-height: 20px;
            border: 1px solid black;
        }

        #pageHelper {
            float: right;
        }

        #pageHelper a {
            text-decoration: none;
            color: black;
        }

        #pageHelper a:any-link {
            color: black;
        }

        #pageHelper_ul {
            list-style: none;
            display: inline;
        }

        #pageHelper .li-text {
            float: left;
            padding: 5px 10px;
            margin: 5px 10px;
        }

        #pageHelper .li,
        #pageHelper_ul li {
            float: left;
            border-radius: 10px;
            padding: 5px 10px;
            margin: 5px 10px;
            border: silver 1px solid;
        }

        #pageHelper_ul li.active {
            background-color: tomato;
            border-color: gray;
        }

        #pageHelper .li:hover,
        #pageHelper_ul li:hover {
            background-color: aliceblue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("[page]").on("click", function () {
                redpage($(this));
            });
            queryData(1, 10);
        });

        function redpage(obj) {
            var curpage = obj.attr("page");
            queryData(curpage, 10);
        }

        function queryData(curpage, pagesize) {
            if (curpage == null || curpage == '') {
                curpage = 1;
            }
            if (pagesize == null || pagesize == '') {
                pagesize = 10;
            }
            $.ajax({
                url: '${ctx}/queryLog',
                type: 'POST',
                data: {curpage: curpage, pagesize: pagesize},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    $("#pageHelper_ul").empty();
                    $("#databody").empty();
                    var lenth = data.total % pagesize == 0 ? (data.total / pagesize) : (data.total / pagesize) + 1;
                    for (var i = 1; i <= lenth; i++) {
                        $("#pageHelper_ul").append("<li onclick='redpage($(this))' page='" + i + "' class='" + (i == curpage ? 'active' : '') + "'><a>" + i + "</a></li>");
                    }
                    for (var i = 0; i < data.list.length; i++) {
                        $("#databody").append("<tr>" +
                            "<td>" + data.list[i].id + "</td>" +
                            "<td>" + data.list[i].content + "</td>" +
                            "<td>" + data.list[i].createtime + "</td></tr>");
                    }
                    $("#prepage").attr('page', curpage - 1 < 0 ? 1 : curpage - 1);
                    $("#nextpage").attr('page', curpage + 1 >= lenth ? lenth : curpage + 1);
                }
            });
        }
    </script>
</head>

<body>
<nav>
    <ul>
        <li><a href="index.jsp">用户管理</a></li>
        <li><a href="logs.jsp">日志查看</a></li>
        <li><a href="help.jsp">帮助</a></li>
        <li style="float: right;"><a href="/logoutServlet">×</a></li>
    </ul>
</nav>
<div id="container">
    <div>
        <form action="/queryCustomer" method="post">
            <h3 style="text-align: center;">日志界面</h3>
            <hr>
            <input type="button" id="buttonSubmit" onclick="queryData(1,10)" value="查询">
        </form>
    </div>
    <div>
        <table id="dataTable">
            <thead>
            <tr>
                <th>id</th>
                <th>内容</th>
                <th>创建时间</th>
            </tr>
            </thead>
            <tbody id="databody">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            </tbody>
        </table>
        <div id="pageHelper">
            <span id="prepage" page="" class="li">&lt;</span>
            <ul id="pageHelper_ul">
                <li><a>2</a></li>
                <li><a>3</a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
            </ul>
            <span id="nextpage" page="" class="li">&gt;</span>
        </div>
    </div>
</div>
</body>
</html>
